<script setup lang="ts">
import { useChannelStore } from '@/stores/channel';
import type { ArticleItem, ArticleResData, AxiosResData } from '@/type';
import axios from 'axios';
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';

  const router = useRouter()

  // const props = defineProps<{
  //   channelId:number
  // }>()
  const store = useChannelStore()

  const list = ref<ArticleItem[]>([])

  watch(()=>store.channelId,async ()=>{
    const res = await axios.get<AxiosResData<ArticleResData>>('https://geek.itheima.net/v1_0/articles',{
      params:{
        // channel_id: props.channelId,
        channel_id: store.channelId,

        timestamp: Date.now()
      }
    })
    console.log(res)
    list.value = res.data.data.results
  },{immediate:true})
</script>

<template>
  <div class="article-list">
    <div class="article-item" v-for="(item,index) in list " :key="item.art_id" @click="router.push(`/detail/${item.art_id}`)">
      <p class="title">{{ item.title }}</p>
      <img v-for="url in item.cover?.images" class="img" :src="url" alt="">
      <div class="info">
        <span>{{item.aut_name}}</span>
        <span>{{ item.comm_count }}</span>
        <span>{{ item.pubdate }}</span>
      </div>
    </div>
  </div>
</template>